<template>
	<view class="mainPage content" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box">
			<view class="title">
				<view class="switch">视频问诊开关</view>
				<view class="text">{{status==true?'已开启':'已关闭'}}</view>
			</view>
			<view class="but">
				<u-switch v-model="checked" @change="change" active-color="#FE7600FF" inactive-color="#eee"></u-switch>
			</view>
		</view>
		<view :class="status==false?'aaa':''">
			<view>
				<view class="flex-container" v-show="show3==true">
					<view class="title">选择问诊费单价 (元)</view>
					<view class="flex-item" :class="index==chengshiNum?'active':''" v-for=" (item,index) in price" :key="index" @click="dianji1(index,item.label)">{{item.label}}</view>
				</view>
				<view class="flex-container">
					<view class="title">自定义问诊费 (元)</view>
					<input class="title" placeholder="请输入自定义问诊费价格" type="digit" @input="input" v-model="register_price" />
				</view>
			</view>
			<view class="flex-container">
				<view style="display: inline-block; width: 20%;position: relative; top: -8rpx;">视频时长</view>
				<input style="display: inline-block; width: 70%;" placeholder="最短时长为15分钟" type="number" v-model="times" placeholder-style="font-size:18rpx;overflow: inherit;" />
				<view style="display: inline-block; width: 10%;position: relative; top: -8rpx;">分钟</view>
			</view>
			<view class="box2">
				<view class="title1">说明</view>
				<view class="title2">1、通过视频在线向患者询问</view>
				<view class="title2">2、视频时长有且只有一个</view>
				<view class="title2">3、时长仅能设置整数，且不低于15分钟</view>
			</view>
			<view class="box3">
				<button class="but" v-if="status==false">确认</button>
				<button class="active" v-else @click="determine">确认</button>
			</view>
		</view>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "视频问诊",
			times: '15',
			show3: true,
			cost: '',
			checked: false,
			chengshiNum: 100,
			status: false,
			datalist: '',
			register_price: '',
			price: [{
				label: '1.00',
				value: 1,
			},
			{
				label: '9.00',
				value: 2,
			},
			{
				label: '19.00',
				value: 3,
			}, {
				label: '29.00',
				value: 4,
			},
			{
				label: '39.00',
				value: 5,
			},
			{
				label: '59.00',
				value: 6,
			}
			],
		};
	},
	onLoad() {
		that = this
		that.obtain()
	},
	methods: {
		// switch打开或者关闭时触发，值为true或者false
		// 即使不监听此事件，this.checked此时也会相应的变成true或者false
		change(status) {
			that.status = status
			console.log(status);
		},
		obtain() {
			that.$postAjax1('Doctorsside_service_settings', {
			}, function (data) {
				that.datalist = data.data.data.Consultation.video_call[0]
				that.register_price = that.datalist.price
				that.times = that.datalist.duration
				console.log('获取成功', that.datalist)
			})
		},
		dianji1(index, label) {
			if (that.status == true) {
				this.chengshiNum = index

				this.chengshiNum = index
				that.register_price = label
				console.log(index, label)
			}
		},
		determine() {
			if (that.times < 15) {
				uni.showToast({
					title: '视频时长不能低于十五分钟',
					icon: 'none',
					duration: 2000
				});
				return
			}
			that.$postAjax1('Doctorsside_inquiry_switch', {
				type_call: 2,//视频
				status: 0,
				price: that.register_price,
				duration: that.times
			}, function (data) {
				uni.reLaunch({
					url: 'service'
				})
				console.log('添加成功')
			})
		},
		input() {
			that.show3 = false
			if (that.register_price == '') {
				that.show3 = true
				that.chengshiNum = 100
			}
		}
	}
};
</script>
<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	position: relative;
	.aaa {
		opacity: 0.5;
	}
	.box {
		background: #ffffff;
		height: 150rpx;
		.title {
			display: inline-block;
			float: left;
			padding: 30rpx 50rpx;
			.switch {
				padding: 0 10rpx;
			}
			.text {
				padding: 10rpx;
				color: #8a8a8a;
			}
		}
		.but {
			display: inline-block;
			float: right;
			padding: 50rpx;
		}
	}
	.box2 {
		//position: absolute;
		//bottom: 0;
		margin-top: 30rpx;
		padding: 50rpx 0;
		//height: 800rpx;
		background: #ffffff;
		width: 100%;
		.title1 {
			padding: 10rpx 50rpx 10rpx 50rpx;
		}
		.title2 {
			padding: 15rpx 50rpx;
		}
	}
	.box3 {
		margin-top: 50rpx;
		margin-bottom: 50px;
		.but {
			width: 90%;
			background: #c4c4c6;
			border-radius: 8rpx;
			color: #ffffff;
		}
		.active {
			width: 90%;
			background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
			border-radius: 8rpx;
			color: #ffffff;
		}
	}
	.flex-container {
		// display: -webkit-flex;
		// display: flex;
		// -webkit-justify-content: flex-end;
		// justify-content: space-around;
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx;
		margin-top: 14rpx;
		.title {
			padding: 20rpx;
			font-size: 28rpx;
			height: 60rpx;
			.title1 {
				display: inline-block;
				width: 80%;
				float: left;
				line-height: 60rpx;
			}
			.title2 {
				display: inline-block;
				width: 20%;
				float: right;
				text-align: center;
				padding: 6rpx 10rpx;
				background: #8a8a8a;
				background: linear-gradient(223deg, #ff9331 0%, #fe7600 100%);
				border-radius: 4rpx;
				color: #ffffff;
			}
		}
		.flex-item {
			width: 30%;
			margin: 30rpx 10rpx;
			color: #adadad;
			display: inline-block;
			border: 1rpx #d1d1d1 solid;
			padding: 20rpx 30rpx;
			border-radius: 60rpx;
			text-align: center;
			clear: both;
		}
		.active {
			background-color: #fe7600ff;
			color: #ffffff;
		}
	}
}
</style>
